<template>
    <div class="tags">
        <el-tag type="primary" :key="tag.name" v-for="(tag, index) in tags" :closable="tag.name !== 'home'"
            :disable-transitions="false" :effect="$route.name === tag.name ? 'dark' : 'plain'"
            @click="routertag(tag)"
            @close="handclose(tag,index)"
            >
            {{ tag.label }}</el-tag>
    </div>
</template>

<script setup>
import { useStore } from 'vuex';
import { useRouter,useRoute } from 'vue-router';
const router = useRouter()
const route=useRoute()
const store = useStore()
const tags = store.state.tabsList
//点击tag跳转功能
const routertag = (item) => {
    console.log(item.name);
    router.push({ name: item.name })
}
const handclose=(tag,index)=>{
    let length=tags.length-1;
     store.commit('closeTab',tag)
     //在首页删除别的就不跳转
     if(tag.name !==route.name){
        return
     }
     //如果在本页点击本页删除，跳转到前面一个
     if(index === length){
        router.push({
            name:tags[index-1].name,
        })
     }else{
        router.push({
            name:tags[index].name
        })
     }

}
</script>
<style lang="less" scoped>
.tags {
    padding: 20px;
    width: 100%;

    .el-tag {
        margin-right: 15px;
    }
}
</style>